import $ from "jquery";

class ProWine{
    constructor(param){
        this.init.apply(this,arguments);
    }
    init(param){
        this.m_rootEle = $(param.rootCls);
        this.m_data = param.data;
        this.render();
        this.bindEvent();
    }
    bindEvent(){
        let that = this;
        this.m_rootEle.find(".nav_li .lanmu ul")
        .on("click","li",function(){
            that.changeView($(this).index());
        });
    }
    changeView(index){
        this.m_rootEle.find(".nav_li .lanmu ul li")
        .addClass(function(){
            if(index == $(this).index())
                return "hover";
        })
        .removeClass(function(){
            if(index != $(this).index())
                return "hover";
        })
        this.m_rootEle.find(".category")
        .css({
            "display": function(ind){
                return index == ind ? "block" : "none";
            }
        })
    }
    render(){
        this.renderBaseInfo();
        this.renderPic();
    }
    // 渲染基础信息
    renderBaseInfo(){
        let html = ``;
        let clsArr = ["zhonglei","rongliang","changhe","country","jiujing",
                        "pingsai","chanqu","jiuti","caiyao","putao","wendu",
                        "seze","xingjiu","chenniang","xiangwei","nianfen"
        ];
        this.m_data.base_info.forEach((info,index)=>{
            html += `<li>
                <span class="${clsArr[index]}">${info.attr}</span>${info.val}
            </li>`;
        });
        html += `<div class="clear"></div>`;
        this.m_rootEle.find("#con_one_1 ul").html(html);
    }
    // 渲染图片
    renderPic(){
        let html = ``;
        this.m_data.introduce.forEach(path=>{
            html += `<img src="${path}">`
        });
        this.m_rootEle.find(".neirong_c .jieshao_nr p").html(html);
    }
}

module.exports = ProWine;